import React, { Component } from 'react'
// import throttle from 'common/js/throttle'
import Banner from 'containers/banner'
const Styles = require('./index.less')

class Tabs extends Component {
  constructor() {
    super()
    this.state = {
      menulist: [
        {name: '市场研究工作组', id: 1},
        {name: '智能城市工作组', id: 2},
        {name: '智能制造工作组', id: 3},
        {name: '智能园区工作组', id: 4},
        {name: '智能人居工作组', id: 5},
        {name: '智能农业工作组', id: 6},
      ],
      currentIndex: -1
    }
    this.menuClick = this.menuClick.bind(this)
  }
  menuClick(index) {
    return () => {
      this.setState({
        currentIndex: index
      })
    }
  }
  render() {
    const { menulist, currentIndex } = this.state
    return (
      <div className={Styles.tabs}>
        <div className={Styles.container}>
          <div className={Styles.tabs_left}>
            <button>申请加入工作组</button>
            <ul className={Styles.menulist}>
              {
                menulist.map((item, index) => (
                  <li key={item.id} className={index === currentIndex ? Styles.active: null} onClick={this.menuClick(index)}>
                    <span></span>
                    <p>{item.name}</p>
                    <i>></i>
                  </li>
                ))
              }
            </ul>
          </div>
          <div className={Styles.tabs_right}>
              something stupid
          </div>
        </div>
      </div>
    )
  }
}
export default class WorkGroup extends Component {
  render() {
    return (
      <div className={Styles.workGroup}>
        <Banner backgroundImg="https://img.alicdn.com/tfs/TB1uoUKJeOSBuNjy0FdXXbDnVXa-1440-640.png">
          <h1>ICA联盟工作组</h1>
          <p>ICA联盟以市场化为导向，以生态系统的基本特征为发展策略，保持丰富的 “物种”多样性，保持能量的不断注入与代谢流动，保持动态平衡与不断循环。 在内部工作组设置上，形成市场洞察、商业驱动、技术实现稳定的三角流动，兼 顾纵向产业链技术上下游标准关系及横向行业标准关系，设置智能城市、智能园 区、智能制造、智能人居、智能农业行业工作组，以及边缘计算标准、AI应用 标准、连接标准、低功耗广域网标准、测试标准、安全标准、数据标准工作组。</p>
        </Banner>
        <Tabs/>
      </div>
    )
  }
}
